<template>
  <div id="app" @touchmove.prevent>
    <van-tabs @touchmove.prevent @change="change">
      <van-tab title="抽个盲盒">
        <div class="m-main">
          <m-swipe/>
          <van-row gutter="10" class="m-cards">
            <van-col span="12">
              <m-card card-type="boy" class="m-card" height="35vh" @get="getCard('boy')" @put="putCard('boy')"/>
            </van-col>
            <van-col span="12">
              <m-card card-type="girl" class="m-card" height="35vh" @get="getCard('girl')" @put="putCard('girl')"/>
            </van-col>
          </van-row>
          <m-popup ref="onShow">
            <m-popup-content
                v-if="status === 'put'"
                :after-read="afterRead"
                :file-list="obj.fileList"
                :handle-delete="deleteHandel"
                :note="obj.note"
                :clean-note="cleanNote"
            />
            <m-popup-extract v-if="status === 'get'" height="50vh" :btn-func="btnFunc" />
          </m-popup>
        </div>
        <m-center-card :show="noteShow" @confirm="confirms" @close="cardClose"/>
      </van-tab>
      <van-tab title="我的纸条">‘
        <home ref="getSelf"/>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup>
import {reactive, ref} from "vue";
import {useStore} from "vuex";
import MPopup from "../../components/m-popup/m-popup.vue";
import Home from "../../pages/home/home.vue";
import MPopupContent from "../../components/m-popup-content/m-popup-content.vue";
import MSwipe from "../../components/m-swipe/m-swipe.vue";
import MCard from "../../components/m-card/m-card.vue";
import MPopupExtract from "@/components/m-popup-extract/m-popup-extract.vue";
import {deleteFile, upload} from "@/api/file";
import {copy, createFileMd5, getSex} from "@/utils/tools";

import {getNote} from "@/api/note";
import MCenterCard from "@/components/m-center-card/m-center-card.vue";
import {Toast} from "vant";

const onShow = ref();
const store = useStore();
const status = ref("");

const obj = reactive({
  fileList:[],
  note: {
    weChatNumber:"",
    message:"",
    sex:"",
    files:[]
  }
})
const getSelf = ref();


const confirms = () => {
  copy(store.getters.getNote.vx);
  Toast.success('复制成功！');
  noteShow.value = false
}
const cardClose = () => {
  confirms()
}
const change =  (name,title) => {
  if (name === 1){
    setTimeout(()=>{
      getSelf.value.getSelf()
    },100)
  }
}

const afterRead = async (file) => {
  file.status = "uploading";
  file.message = "正在上传";
  const fileMd5 = await createFileMd5(file.file);
  const data = {
    file:file.file,
    md5:fileMd5
  }
  const res = await upload(data);
  if (res.status === 100) {
    file.status = "success";
    file.message = "上传成功";
    file.url = res.data.url;
    file.id = res.data.fileId;
    obj.note.files.push(file.id);
  } else {
    file.status = "error";
    file.message = "上传失败";
  }
}

const cleanNote = () => {
  obj.fileList = []
  obj.note.weChatNumber = "";
  obj.note.message = "";
  obj.note.files = [];
  onShow.value.onClose();
}

const btnFunc = async ()=>{
  const sex = getSex(store.getters.getSexType)
  noteShow.value = true
  const res = await getNote(sex)
  store.commit("setNote",res.data)

  onShow.value.onClose()
}

const noteShow = ref(false)
const deleteHandel = async (file) => {
  await deleteFile(file.id);
  delFileId(file.id)
}

const delFileId = (item) => {
  for (let i=0; i<obj.note.files.length; i++){
    if (obj.note.files[i] === item){
      obj.note.files.splice(i, 1)
    }
  }
}

const putCard = (sex) => {
  status.value = 'put'
  store.commit("setSexType",sex)
  obj.note.sex = getSex(store.getters.getSexType)
  onShow.value.onShow();
}

const getCard = (sex) => {
  status.value = 'get'
  store.commit("setSexType",sex)
  onShow.value.onShow();
}

</script>

<style scoped>

 .m-main {
   padding: 0 5vw;
 }
 .m-card {
   width: 100%;
 }
 .m-cards{
   height: 35vh;
   margin-top: 2vh;
 }
</style>
